<template>
  <div class="">
    <a-card class="" :body-style="{ width: '100%', overflow: 'auto' }">
      <div class="h-[300px] w-full">
        <BaseTitle title="7日预约转化" />
        <div id="person" class="h-[280px]"><a-empty class="pt-8" /></div>
      </div>
    </a-card>
  </div>
</template>

<script setup>
import { onMounted } from 'vue'
import { message } from 'ant-design-vue'
import echarts from '@/utils/echarts'

//个人费用图表bar
const initRegisterChart = async () => {
  const { code, data = [], msg } = await post('/statistic/doctorAppointmentSeven')
  if (code !== 0) return message.error(msg)
  if (data.length === 0) return
  const xAxisData = data.map((x) => x.rq)
  const seriesData1 = data.map((x) => x.yyzs)
  const seriesData2 = data.map((x) => x.yydczs)
  const seriesData3 = data.map((x) => x.ssyyzs)
  const seriesData4 = data.map((x) => x.ssyydczs)
  // "yyzs": 0,"yydczs": 0,"ssyyzs": 1,"ssyydczs":0
  const registerDom = document.getElementById('person')
  if (!registerDom) return
  const registerChart = echarts.init(registerDom)
  registerChart.setOption({
    legend: {
      itemWidth: 10,
      itemHeight: 10,
      selectedMode: false,
      top: '20',
      right: '5%'
    },
    xAxis: {
      type: 'category',
      data: xAxisData,
      axisTick: { show: false },
      axisLabel: { color: '#666666', interval: 0 },
      axisLine: { show: false }
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    yAxis: {
      name: '人次',
      nameTextStyle: { color: '#aaa' },
      minInterval: 1,
      type: 'value',
      axisLabel: { color: '#aaa' },
      axisLine: { show: false },
      splitLine: { show: true, lineStyle: { type: 'dashed' } }
    },

    series: [
      {
        data: seriesData2,
        type: 'bar',
        name: '到场挂号人数',
        barWidth: 16,
        stack: 'one',
        itemStyle: {
          barBorderRadius: [8, 8, 8, 8],
          color: '#FF98BF'
        }
      },
      {
        data: seriesData1,
        type: 'bar',
        name: '预约总数',
        barWidth: 16,
        stack: 'one',
        itemStyle: { barBorderRadius: [8, 8, 8, 8], color: '#37B5F1' }
      },
      {
        data: seriesData4,
        type: 'bar',
        name: '手术登记人数',
        barWidth: 16,
        stack: 'two',
        itemStyle: {
          barBorderRadius: [8, 8, 8, 8],
          color: '#5F79F4'
        }
      },
      {
        data: seriesData3,
        type: 'bar',
        name: '手术预约总数',
        barWidth: 16,
        stack: 'two',
        itemStyle: {
          barBorderRadius: [8, 8, 8, 8],
          color: '#F5C36E'
        }
      }
    ]
  })
}

onMounted(() => {
  initRegisterChart()
})
</script>
<style lang="less" scoped>
:deep(.ant-tabs-nav) {
  &::before {
    border-bottom: none;
  }
}
.card-item {
  width: 23%;
  padding: 8px 16px;
  border-radius: 4px;
}
</style>
